/**
 * dashboard顶部的系统介绍；
 * 总销售额、拼团订单销售额、支付笔数、总抽奖次数
 */
import React, { memo } from 'react';
import { Row, Col, Icon, Tooltip } from 'antd';
import { FormattedMessage } from 'umi/locale';
import styles from './Analysis.less';
import { ChartCard, MiniArea, MiniBar, MiniProgress, Field } from '@/components/Charts';
import Trend from '@/components/Trend';
import numeral from 'numeral';
import Yuan from '@/utils/Yuan';

const topColResponsiveProps = {
  xs: 24,
  sm: 12,
  md: 12,
  lg: 12,
  xl: 6,
  style: { marginBottom: 24 },
};

const IntroduceRow = memo(
  ({
    loading,
    visitData,
    orderInfo,
    orderNum,
    grouponTotalPrice,
    grouponTodayPrice,
    grouponOrderNums,
    drawTotal,
    drawPriceTotal,
  }) => (
    <Row gutter={24}>
      <Col {...topColResponsiveProps}>
        <ChartCard
          style={{ height: 170 }}
          bordered={false}
          title={<FormattedMessage id="app.analysis.total-sales" defaultMessage="Total Sales" />}
          action={
            <Tooltip title="订单销售额">
              <Icon type="info-circle-o" />
            </Tooltip>
          }
          loading={loading}
          total={() => <Yuan>{orderInfo !== undefined ? orderInfo.totalPrice : 0}</Yuan>}
          footer={
            <Field
              label={<FormattedMessage id="app.analysis.day-sales" defaultMessage="Daily Sales" />}
              value={`￥${numeral(orderInfo !== undefined ? orderInfo.todayPrice : 0).format(
                '0,0'
              )}`}
            />
          }
          contentHeight={46}
        >
          {/*<Trend flag="up" style={{ marginRight: 16 }}>*/}
          {/*  <FormattedMessage id="app.analysis.week" defaultMessage="Weekly Changes" />*/}
          {/*  <span className={styles.trendText}>12%</span>*/}
          {/*</Trend>*/}
          {/*<Trend flag="down">*/}
          {/*  <FormattedMessage id="app.analysis.day" defaultMessage="Daily Changes" />*/}
          {/*  <span className={styles.trendText}>11%</span>*/}
          {/*</Trend>*/}
        </ChartCard>
      </Col>

      <Col {...topColResponsiveProps}>
        <ChartCard
          style={{ height: 170 }}
          bordered={false}
          loading={loading}
          title="拼团订单销售额"
          action={
            <Tooltip title="拼团订单统计">
              <Icon type="info-circle-o" />
            </Tooltip>
          }
          total={() => <Yuan>grouponTotalPrice === undefined ? 0 : grouponTotalPrice</Yuan>}
          footer={
            <div>
              <Field
                label="拼团订单量"
                style={{}}
                value={numeral(grouponOrderNums === undefined ? 0 : grouponOrderNums).format('0,0')}
              />
              <Field
                label="拼团日销售额"
                style={{}}
                value={`￥${numeral(grouponTodayPrice === undefined ? 0 : grouponTodayPrice).format(
                  '0,0'
                )}`}
              />
            </div>
          }
          contentHeight={46}
        >
          {/*<MiniArea color="#975FE4" data={visitData} />*/}
        </ChartCard>
      </Col>
      <Col {...topColResponsiveProps}>
        <ChartCard
          style={{ height: 170 }}
          bordered={false}
          loading={loading}
          title={<FormattedMessage id="app.analysis.payments" defaultMessage="Payments" />}
          action={
            <Tooltip title="订单成交量">
              <Icon type="info-circle-o" />
            </Tooltip>
          }
          total={numeral(orderNum === undefined ? 0 : orderNum).format('0,0')}
          footer={null}
          contentHeight={46}
        >
          <MiniBar data={visitData} />
        </ChartCard>
      </Col>
      <Col {...topColResponsiveProps}>
        <ChartCard
          style={{ height: 170 }}
          bordered={false}
          loading={loading}
          title="总抽奖次数"
          action={
            <Tooltip title="抽奖次数统计">
              <Icon type="info-circle-o" />
            </Tooltip>
          }
          total={() => (drawTotal === undefined ? 0 : drawTotal)}
          footer={
            <div>
              <Field
                label="中奖次数"
                style={{ float: 'left' }}
                value={numeral(drawPriceTotal === undefined ? 0 : drawPriceTotal).format('0,0')}
              />
              {/*<Field*/}
              {/*  label='拼团日销售额'*/}
              {/*  style={{float: 'left',marginLeft:20}}*/}
              {/*  value={`￥${numeral(grouponTodayPrice === undefined ? 0 : grouponTodayPrice).format('0,0')}`}*/}
              {/*/>*/}
            </div>
          }
          contentHeight={46}
        >
          {/*<MiniArea color="#975FE4" data={visitData} />*/}
        </ChartCard>
      </Col>
      {/*<Col {...topColResponsiveProps}>*/}
      {/*  <ChartCard*/}
      {/*    loading={loading}*/}
      {/*    bordered={false}*/}
      {/*    title={*/}
      {/*      <FormattedMessage*/}
      {/*        id="app.analysis.operational-effect"*/}
      {/*        defaultMessage="Operational Effect"*/}
      {/*      />*/}
      {/*    }*/}
      {/*    action={*/}
      {/*      <Tooltip*/}
      {/*        title={<FormattedMessage id="app.analysis.introduce" defaultMessage="Introduce"/>}*/}
      {/*      >*/}
      {/*        <Icon type="info-circle-o"/>*/}
      {/*      </Tooltip>*/}
      {/*    }*/}
      {/*    total="78%"*/}
      {/*    footer={*/}
      {/*      <div style={{whiteSpace: 'nowrap', overflow: 'hidden'}}>*/}
      {/*        <Trend flag="up" style={{marginRight: 16}}>*/}
      {/*          <FormattedMessage id="app.analysis.week" defaultMessage="Weekly Changes"/>*/}
      {/*          <span className={styles.trendText}>12%</span>*/}
      {/*        </Trend>*/}
      {/*        <Trend flag="down">*/}
      {/*          <FormattedMessage id="app.analysis.day" defaultMessage="Weekly Changes"/>*/}
      {/*          <span className={styles.trendText}>11%</span>*/}
      {/*        </Trend>*/}
      {/*      </div>*/}
      {/*    }*/}
      {/*    contentHeight={46}*/}
      {/*  >*/}
      {/*    <MiniProgress percent={78} strokeWidth={8} target={80} color="#13C2C2"/>*/}
      {/*  </ChartCard>*/}
      {/*</Col>*/}
    </Row>
  )
);

export default IntroduceRow;
